<template>
	<view class="user" :style="{paddingTop:navHeight,backgroundImage: 'url('+imagePath+'/images/banner/my_topbg.png)',
		backgroundSize: '100% auto',backgroundRepeat: 'no-repeat'}">
		<view class="top-nav-box" :style="{height:navHeight, paddingTop:statusBarHeight}">
			<!-- <image class="top-nav-back" src="../../static/images/icon_user_back.png" @click="getback"></image> -->
		</view>
		<view class="header">
			<view class="hd-wrap">
				<view class="user-info flex row-between">
					<router-link to="/bundle/pages/user_profile/user_profile">
						<view class="info flex">
							<image class="avatar m-r-20 flex-none"
								:src="isLogin ? userInfo.avatar : '/static/images/portrait_empty.png'" />
							<view v-if="isLogin">
								<view class="name flex">
									<view class="white bold line-2">{{userInfo.nickname}}</view>
								</view>
							</view>
							<view v-else>
								<view style="font-size: 32rpx;color: #fff;">点击登录</view>
								<view class="sm m-t-10 white" style="font-size: 22rpx">登录体验更多功能</view>
							</view>
						</view>
					</router-link>
					<view class="flex m-l-20">
						<router-link to="/pages/shop_cart/shop_cart">
							<view class="user-opt">
								<image style="width:46rpx;height: 42rpx;" src="/static/images/icon_home_cart.png">
								</image>
							</view>
						</router-link>
						<text style="margin-left: 10rpx;font-size: 32rpx;color: #fff;"
							v-if="cartNum>0">{{cartNum}}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="order-nav bg-white">
			<router-link to="/bundle/pages/user_order/user_order">
				<view class="title flex row-between">
					<view style="font-size: 29rpx;font-weight: 700;">我的订单</view>
					<view style="font-size: 26rpx;">
						全部
					</view>
				</view>
			</router-link>
			<view class="nav flex">
				<router-link class="item" :to="{path: '/bundle/pages/user_order/user_order',query:{type: 'pay'}}">
					<view class="flex-col col-center m-b-20">
						<view class="icon-contain">
							<view v-if="userInfo.wait_pay" class="badge xs flex row-center bg-white">
								{{userInfo.wait_pay}}
							</view>
							<image class="nav-icon" src="/static/images/icon_my_payment.png"></image>
						</view>
						<view class="sm m-t-10">待付款</view>
					</view>
				</router-link>
				<router-link class="item" to="/bundle/pages/user_order/user_order?type=delivery">
					<view class="flex-col col-center m-b-20">
						<view class="icon-contain">
							<view v-if="userInfo.wait_delivery" class="badge xs flex row-center bg-white">
								{{userInfo.wait_delivery}}
							</view>
							<image class="nav-icon m-b-10" src="/static/images/icon_my_fahuo.png"></image>
						</view>
						<view class="sm">待发货</view>
					</view>
				</router-link>
				<router-link class="item" to="/bundle/pages/user_order/user_order?type=receive">
					<view class="flex-col col-center m-b-20">
						<view class="icon-contain">
							<view v-if="userInfo.wait_take" class="badge xs flex row-center bg-white">
								{{userInfo.wait_take}}
							</view>
							<image class="nav-icon" src="/static/images/icon_my_shouhuo.png"></image>
						</view>
						<view class="sm m-t-10">待收货</view>
					</view>
				</router-link>
				<router-link class="item" to="/bundle/pages/user_order/user_order?type=picking">
					<view class="flex-col col-center m-b-20">
						<view class="icon-contain">
							<view v-if="userInfo.wait_picking" class="badge xs flex row-center bg-white">
								{{userInfo.wait_picking}}
							</view>
							<image class="nav-icon" src="/static/images/icon_my_ziti.png"></image>
						</view>
						<view class="sm m-t-10">待自提</view>
					</view>
				</router-link>
				<router-link class="item" to="/bundle/pages/after_sales/after_sales">
					<view class="flex-col col-center m-b-20">
						<view class="icon-contain">
							<view v-if="userInfo.after_sale" class="badge xs flex row-center bg-white">
								{{userInfo.after_sale}}
							</view>
							<image class="nav-icon" src="/static/images/icon_my_shouhou.png"></image>
						</view>
						<view class="sm m-t-10">退款/售后</view>
					</view>
				</router-link>
			</view>
		</view>
		<view class="coupon-nav">
			<router-link style="width: 49%;" to="/bundle/pages/get_coupon/get_coupon">
				<view class="coupon-cell bg-white">
					<image class="coupon-icon" src="/static/images/icon_my_coupon_center.png"></image>
					<view>
						<view class="normal" style="font-size: 27rpx;">领券中心</view>
						<view style="margin-top: 10rpx;font-size: 20rpx;color: 9e9e9e;"><text class="primary"
								style="margin-right: 6rpx;">{{allCount}}</text>可领取</view>
					</view>
				</view>
			</router-link>
			<router-link style="width: 49%;" to="/bundle/pages/user_coupon/user_coupon">
				<view class="coupon-cell bg-white">
					<image class="coupon-icon" src="/static/images/icon_my_coupon_mine.png"></image>
					<view>
						<view class="normal" style="font-size: 27rpx;">我的优惠券</view>
						<view style="margin-top: 10rpx;font-size: 20rpx;color: 9e9e9e;"><text class="primary"
								style="margin-right: 6rpx;">{{myCount}}</text>可用
						</view>
					</view>
				</view>
			</router-link>
		</view>
		<view class="server-nav bg-white">
			<view>
				<view class="title flex row-between">
					<view style="font-size: 29rpx;font-weight: 700;">常用功能</view>
				</view>
			</view>
			<view class="nav flex flex-wrap" style="padding-top: 0;">
				<router-link style="width: 100%;" to="/bundle/pages/user_address/user_address">
					<view class="nav-item-normal">
						<image src="../../static/images/icon_user_shouhuoxinxi.png" style="width: 25rpx;height: 30rpx;">
						</image>
						<text>收货信息管理</text>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</router-link>
				<router-link style="width: 100%;" to="/bundle/pages/user_profile/user_profile">
					<view class="nav-item-normal">
						<image src="../../static/images/icon_user_setting.png" style="width: 32rpx;height: 30rpx;">
						</image>
						<text>个人设置</text>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</router-link>
			</view>
		</view>
		<view class="server-nav bg-white">
			<view>
				<view class="title flex row-between">
					<view style="font-size: 29rpx;font-weight: 700;">其他功能</view>
				</view>
			</view>
			<view class="nav flex flex-wrap" style="padding-top: 0;">
				<view class="nav-item-normal" @click="showPhonePop=true">
					<image src="../../static/images/icon_user_kefu.png" style="width: 30rpx;height: 30rpx;">
					</image>
					<text>联系客服</text>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="nav-item-normal" @click="showFeedbackPop=true">
					<image src="../../static/images/icon_user_yijianfankui.png" style="width: 25rpx;height: 30rpx;">
					</image>
					<text>意见反馈</text>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
		<u-popup v-model="showPhonePop" mode="bottom" border-radius="14" :closeable="true" @close="onClose"
			:safe-area-inset-bottom="true">
			<view style="margin-bottom: 140rpx;padding: 80rpx 0 40rpx 0;text-align: center;">
				<view style="font-size: 28rpx;font-weight: 700;">拨打客服电话</view>
				<view style="margin-top: 40rpx;font-size: 28rpx;color: #919191;"><text
						@click="handleConsult">{{shopMobile}}</text></view>
				<view class="pop-btn bg-primary" @click="handleConsult">拨打</view>
			</view>
		</u-popup>
		<u-popup v-model="showFeedbackPop" mode="bottom" border-radius="14" :closeable="true" @close="onClose"
			:safe-area-inset-bottom="true">
			<view style="position: relative;margin-bottom: 140rpx;padding: 30rpx 40rpx;background-color: #f6f6f6;">
				<view style="margin-bottom: 45rpx;font-size: 32rpx;font-weight: 700;">意见反馈</view>
				<view style="font-size: 29rpx;font-weight: 700;">您的反馈将有助于我们改善产品体验</view>
				<textarea v-model="remark" class="pop-textarea" maxlength="200" enterkeyhint="return"
					placeholder="请描述您遇到的问题或者想提出的建议"></textarea>
				<view style="position: absolute;top: 370rpx;right: 60rpx;">{{remark.length}} / 200</view>

				<u-upload ref="uUpload" :show-progress="false" :header="{token: $store.getters.token}" :max-count="9"
					width="160" height="160" :custom-btn="true" style="margin-top: 40rpx;" :action="action"
					upload-text="上传图片" @on-success="onSuccess" @on-remove="onRemove">
					<template v-slot:addBtn>
						<button class="pop-upload">
							<image src="../../static/images/icon_camera.png"></image>
							<text style="color: #919191;">上传问题截图最多9张</text>
						</button>
					</template>
				</u-upload>
				<view style="text-align: center;">
					<view class="pop-btn bg-primary" @click="addFeedBachFun">确认提交</view>
				</view>
			</view>
		</u-popup>
		<u-modal v-model="confirmDialog" title="您的反馈已提交" :titleStyle="{'font-size': '36rpx','font-weight': 700}"
			:showConfirmButton="false" :maskCloseAble="true" width="616" :z-index="9999">
			<view style="text-align: center;">
				<image src="../../static/images/feedback_confirm.png"
					style="width: 330rpx;height: 324rpx;margin-top: 80rpx;margin-bottom: 50rpx;"></image>
				<view style="display: inline-block; width: 400rpx;font-size: 28rpx;color: 5e5e5e;text-align: left;">
					感谢您的使用和反馈，我们会努 力做的更好</view>
				<view class="feedback-btn bg-primary" style="margin-bottom: 50rpx;" @click="confirmDialog=false">确认
				</view>
			</view>
		</u-modal>
		<tabbar></tabbar>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		getMenu,
	} from '@/api/store'
	import {
		addFeedBach
	} from '@/api/user'
	import {
		baseURL,
		imagePath
	} from '@/config/app';
	import {
		getCouponCount
	} from '@/api/activity'
	import {
		toLogin
	} from '@/utils/login'
	import {
		menuJump,
		copy
	} from '@/utils/tools'
	import Cache from '@/utils/cache'
	import {
		SHOP_INFO
	} from "@/config/cachekey";
	const app = getApp()
	export default {
		data() {
			return {
				imagePath: imagePath,
				action: baseURL + '/file/formimage',
				showNav: false,
				navBg: 0,
				menuList: [],
				showPhonePop: false,
				showFeedbackPop: false,
				confirmDialog: false,
				fileList: [],
				remark: "",
				shopMobile: "",
				allCount: 0,
				myCount: 0
			};
		},
		onLoad(options) {
			this.getMenuFun();
		},

		onShow() {
			console.log("isLogin:" + this.isLogin)
			this.getUser();
			this.getCartNum();
			this.getHomeFun();
			if (this.isLogin) {
				this.getCouponCountFun();
			}
		},

		onPageScroll(e) {
			const top = uni.upx2px(100)
			const {
				scrollTop
			} = e
			let percent = scrollTop / top > 1 ? 1 : scrollTop / top
			this.navBg = percent
		},
		onPullDownRefresh() {
			this.getUser().then(() => {
				uni.stopPullDownRefresh();
			})
			this.getMenuFun();
		},
		methods: {
			...mapActions(['getCartNum', 'getUser']),
			getback() {
				//#ifdef H5
				this.$router.go(-1); //返回上一层
				//#endif

				//#ifdef MP-WEIXIN
				uni.navigateBack({
					delta: 1
				});
				//#endif
			},
			goLogin() {
				let {
					isLogin
				} = this;
				if (isLogin) {
					uni.navigateTo({
						url: '/bundle/pages/user_profile/user_profile'
					});
					return;
				}
				uni.navigateTo({
					url: '/pages/login/login'
				});
			},

			goPage(url) {
				if (!this.isLogin) return toLogin()
				uni.navigateTo({
					url
				});
			},
			async getMenuFun() {
				const {
					data,
					code
				} = await getMenu({
					type: 2,
				})
				if (code == 1) {
					this.menuList = data
				}
			},
			onCopy(e) {
				copy(this.userInfo.sn)
			},
			menuJump(item) {
				menuJump(item)
			},
			onSuccess(e) {
				this.fileList.push(e.data.base_uri)
			},
			onRemove(index) {
				this.fileList.splice(index, 1)
				console.log(index)
			},
			async addFeedBachFun() {
				const {
					data,
					code
				} = await addFeedBach({
					content: this.remark,
					images: this.fileList
				})
				if (code == 1) {
					this.showFeedbackPop = false;
					this.confirmDialog = true;
				}
			},
			async getHomeFun() {
				if (this.shopInfo.current_shop || Cache.get(SHOP_INFO).current_shop) {
					this.shopMobile = this.shopInfo.current_shop ? this.shopInfo.current_shop.mobile : Cache.get(
						SHOP_INFO).current_shop.mobile;
				} else {
					await this.getShop();
					this.shopMobile = this.shopInfo.current_shop.mobile;
				}
			},
			getCouponCountFun() {
				getCouponCount().then((res) => {
					if (res.code == 1) {
						this.allCount = res.data.all_count;
						this.myCount = res.data.my_count;
					} else {
						this.$toast({
							title: res.msg
						});
					}
				});
			},
			handleConsult() {
				uni.makePhoneCall({
					phoneNumber: this.shopMobile.toString(), //仅为示例
				});
			},
		},
		computed: {
			...mapGetters(["userInfo", "inviteCode", 'appConfig', 'sysInfo', 'cartNum', 'shopInfo']),
			background() {
				const {
					center_setting
				} = this.appConfig
				return center_setting.top_bg_image ? {
					'background-image': `url(${center_setting.top_bg_image})`
				} : {}
			},
			statusBarHeight() {
				return this.sysInfo.statusBarHeight + 'px'
			},
			navHeight() {
				this.userInfo;
				this.appConfig
				return this.sysInfo.navHeight + 'px'
			},
		}
	};
</script>
<style lang="scss" scoped>
	.user {
		.top-nav-box {
			position: fixed;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			padding-left: 32rpx;
			padding-right: 200rpx;
			top: 0;
			z-index: 1;

			.top-nav-back {
				width: 58rpx;
				height: 58rpx;
			}
		}

		.header {
			margin: 0 20rpx;
			padding-top: 20rpx;

			.hd-wrap {
				border-radius: 20rpx;
			}

			.user-info {
				padding: 20rpx 30rpx;

				.avatar {
					height: 100rpx;
					width: 100rpx;
					border-radius: 50%;
					overflow: hidden;
				}

				.name {
					text-align: left;
					margin-bottom: 5rpx;
					font-size: 32rpx;
				}

				.user-id {
					border: $-solid-border;
					border-radius: 100rpx;
					padding: 2rpx 15rpx;
				}

				.user-opt {
					position: relative;

					.dot {
						position: absolute;
						background-color: #ee0a24;
						border: 2rpx solid #FFFFFF;
						color: $-color-primary;
						border-radius: 100%;
						top: 6rpx;
						right: 0rpx;
						font-size: 22rpx;
						min-width: 16rpx;
						height: 16rpx;
					}
				}

				.level {
					background: #333;
					padding: 0 15rpx;
					color: #ffdea5;
					line-height: 40rpx;

					.v {
						font-style: italic;
					}
				}
			}

			.user-assets {
				flex: 1;

				.user-assests-item {
					flex: 1;
				}
			}

		}

		.order-nav {
			.icon-contain {
				position: relative;
			}
		}

		.order-nav,
		.my-assets {
			margin: 20rpx 20rpx 0;
			padding-top: 20rpx;
			border-radius: 16rpx;
		}

		.server-nav {
			margin: 20rpx;
			padding-bottom: 20rpx;
			border-radius: 16rpx;
		}

		.coupon-nav {
			margin: 20rpx;
			display: flex;
			justify-content: space-between;

			.coupon-cell {
				display: flex;
				width: 100%;
				height: 118rpx;
				padding: 0 40rpx;
				border-radius: 16rpx;
				align-items: center;

				.coupon-icon {
					width: 55rpx;
					height: 55rpx;
					margin-right: 30rpx;
				}
			}
		}

		.title {
			height: 80rpx;
			padding: 0 30rpx;
			font-size: 30rpx;
		}

		.nav {
			padding: 26rpx 0 0;

			.assets-item {
				flex: 1;
			}

			.item {
				width: 25%;

				.sm {
					font-size: 22rpx;
				}
			}

			.badge {
				padding: 0 6rpx;
				min-width: 28rpx;
				height: 28rpx;
				border-radius: 28rpx;
				box-sizing: border-box;
				background-color: $-color-primary;
				border: 1rpx solid $-color-white;
				color: $-color-white;
				position: absolute;
				left: 40rpx;
				top: -10rpx;
				z-index: 2;
			}

			.nav-icon {
				width: 52rpx;
				height: 52rpx;
			}

			.nav-item-normal {
				width: 100%;
				height: 70rpx;
				display: flex;
				padding: 0 30rpx;
				justify-content: space-between;
				align-items: center;

				text {
					flex: 1;
					margin-left: 20rpx;
					font-size: 26rpx;
				}
			}
		}
	}

	.pop-textarea {
		width: calc(100% - 50rpx);
		height: 200rpx;
		margin-top: 20rpx;
		padding: 25rpx;
		background-color: #fff;
		font-size: 26rpx;
	}

	.pop-upload {
		width: 100%;
		height: 200rpx;
		border: dashed 2px #e5e5e5;
		text-align: center;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;

		image {
			width: 49rpx;
			height: 42rpx;
		}
	}

	.pop-btn,
	.feedback-btn {
		display: inline-block;
		width: 448rpx;
		height: 75rpx;
		margin-top: 100rpx;
		border-radius: 10rpx;
		font-size: 29rpx;
		color: #fff;
		line-height: 75rpx;
		text-align: center;
	}
</style>